<template>
    <div class="login-container">
        <div class="login-title">账号密码登录</div>
        <div class="content-container">
            <div class="text">
                <input type="text" placeholder="请输入手机号：" v-model="phoneNumber">
            </div>
            <div class="text">
                <input type="password" placeholder="请输入密码：" v-model="password">
            </div>
            <div class="radio">
                <span>
                    <label for="agreementCheckbox">
                        <input type="checkbox" name="radio" :value="true" id="agreementCheckbox"
                            v-model="selectedOption">
                        已阅读并同意 <a href="">《用户协议》</a> 和 <a href="">《隐私政策》</a>，允许家教统一管理本人账号信息
                    </label>
                </span>

            </div>

            <div class="next">
                <input type="submit" value="登录" @click="handleNextStep">
            </div>
            <div class="pwdlogin" @click="pwdlogin">手机号登录</div>
        </div>
        <div class="bottom">
            <div class="otherwaylogin">
                或者通过以下方式登录
            </div>
            <div class="wechatimg">
                <i class="iconfont icon-weixin"></i>
            </div>
            <div class="bottom-content">
                <span>服务热线</span>
                <span>监督电话</span>
            </div>
        </div>
    </div>

</template>

<script setup>
import { ref } from 'vue'
import axios from '@/api/index';
import { useRouter } from 'vue-router'
import { showNotify } from 'vant';
import { onMounted } from 'vue'
import { useUserStore } from '@/stores/userStore'
import { useStorageInfo } from '@/hooks/useStorageInfo';



const userStore = useUserStore()
userStore.clearUser()

const router = useRouter()

const selectedOption = ref(false)
const phoneNumber = ref('')
const password = ref('')


const handleNextStep = async () => {
    // 登录逻辑
    if (selectedOption.value) {
        // 用户同意了条款，可以点击登录
        // 账号密码正确的情况下
        if (phoneNumber.value && password.value) {
            if (password.value == '123456') {
                showNotify({ type: 'primary', message: '密码为初始密码，请先修改密码！' });
                return;
            }
            // 发送接口请求
            const res = await axios.post('/user/login', {
                phoneNumber: phoneNumber.value,
                password: password.value
            });
            // 跳转到下一步
            if (res.data.code === '8000') {
                // userStore.setUserInfo(res.data.data)
                let userInfo = useStorageInfo('userInfo', {})
                userInfo.value = res.data.data;

                userStore.setToken(res.data.token)
                router.push('/home')
            } else if (res.data.code === '8004') {
                showNotify({ type: 'primary', message: '手机号或密码错误！' });
            }

        } else {
            showNotify({ type: 'primary', message: '账号或密码为空' });
        }
    } else {
        // 用户未同意条款，阻止进一步操作
        showNotify({ type: 'primary', message: '请先阅读并同意《用户协议》和《隐私政策》' });

    }

}

const pwdlogin = () => {
    router.push('/login')
}
</script>

<style lang="less" scoped>
.login-container {
    height: 100vh;
    width: 100vw;
    padding: 0 0.72rem;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .login-title {
        margin-top: 3.52rem;
        font-size: 0.85rem;
        margin-bottom: 0.55rem;
    }

    .content-container {
        height: 7.2rem;
        // background-color: green;
        position: relative;

        .text {
            position: relative;

            input {
                width: 8.4rem;
                height: 0.85rem;
                margin-bottom: 0.27rem;
                font-size: 0.48rem;
                color: #9A9A9A;
            }

            .getcode {
                position: absolute;
                right: 0.4rem;
                bottom: 0.6rem;
            }
        }

        .radio {
            margin-top: 0.6rem;

            // font-size: 0.37rem;
            span {
                letter-spacing: 3px;

                a {
                    color: rgb(255, 191, 107);
                }
            }
        }

        .next {
            width: 8.5rem;
            height: 0.92rem;
            margin-top: 0.66rem;

            input {
                width: 8.5rem;
                height: 1.2rem;
                background-color: rgb(255, 191, 107);
                color: #fff;
                font-size: 0.48rem;
                border-radius: 0.2rem;
            }
        }

        .pwdlogin {
            // right: 0;
            font-size: 0.375rem;
            position: absolute;
            bottom: 0.7rem;
            right: 0;
            color: #9A9A9A;
        }
    }

    .bottom {
        height: 4.74rem;
        // background: green;
        font-size: 0.377rem;
        text-align: center;
        // margin-bottom: 2rem;

        .wechatimg {
            margin-top: 1rem;

            i {
                font-size: 1rem;
                color: rgb(10, 188, 100)
            }

        }

        .bottom-content {
            display: flex;
            margin-top: 1rem;

            span {

                flex: auto;
            }
        }
    }
}
</style>